<template>
  <header
    class="sticky top-0 z-10 flex flex-row items-center justify-between bg-gray-100/80 p-2 backdrop-blur-sm dark:bg-zinc-900/80"
  >
    <!-- 
      左侧插槽容器
      - flex-shrink-0 防止被压缩
      - min-w-[28px] 保证最小宽度，与右侧占位符宽度(w-7)一致
    -->
    <div class="flex-shrink-0 min-w-[28px]">
      <slot name="left">
        <!-- 默认内容：返回按钮 -->
        <button
          class="flex h-7 w-7 items-center justify-center rounded-full p-1 hover:bg-gray-300 hover:dark:bg-gray-700"
          @click="onBackClick"
        >
          <LeftIcon class="h-5 w-5" />
        </button>
      </slot>
    </div>

    <!-- 
      中间插槽容器
      - v-if="$slots.center" 仅在提供了 center 插槽时渲染
      - flex-1 占据剩余空间
      - text-center 文本居中
      - px-4 左右留出间距，避免紧贴左右元素
    -->
    <div v-if="$slots.center" class="flex-1 px-4 text-center">
      <slot name="center"></slot>
    </div>

    <!-- 
      右侧插槽容器
      - flex-shrink-0 防止被压缩
      - min-w-[28px] 保证最小宽度，与左侧默认按钮宽度(w-7)一致
    -->
    <div v-if="rightPlaceholder" class="flex-shrink-0 min-w-[28px] flex justify-end">
      <!-- 如果提供了 right 插槽，则渲染插槽内容 -->
      <slot v-if="$slots.right" name="right"></slot>
    </div>
  </header>
</template>

<script setup>
// 假设你的图标组件在这个路径
import LeftIcon from "@/components/icon/LeftIcon.vue";

// 定义组件的 props
const props = defineProps({
  /**
   * 当右侧插槽为空时，是否显示一个等宽的占位符以保持对称
   */
  rightPlaceholder: {
    type: Boolean,
    default: false,
  },
});

// 定义组件可以触发的事件
const emit = defineEmits(['back']);

// 默认返回按钮的点击事件处理函数
const onBackClick = () => {
  // 触发 back 事件，让父组件处理具体逻辑（如 router.back()）
  emit('back');
};
</script>

<style scoped>
/* 你可以在这里添加一些 scoped 的样式，如果需要的话 */
</style>
